<template>
  <div style="width: 50%">
    <BasicForm @register="register">
      <template #name>
        111111
      </template>
      <template #date> 2222 </template>
    </BasicForm>
    <a-space>
      <a-button @click="submitForm">获取表单内容</a-button>
      <a-button @click="resetFields">重置表单</a-button>
      <a-button @click="setVal">设置表单内容</a-button>
      <a-button @click="updateSchema(newSchema)">updateSchema</a-button>
      <a-button @click="appendSchemaByField(appendSchema)"
        >appendSchemaByField</a-button
      >
      <a-button @click="removeSchemaByField('city')"
        >removeSchemaByField</a-button
      >
    </a-space>
  </div>
</template>
<script lang="ts" setup>
import { createVNode } from "vue";
import { BasicForm, useForm } from "/@/components";

const schemas: any = [
  {
    field: "name",
    colProps: { span: 8 },
    label: 
      ""
    ,
    // labelSlot:'name',
    defaultValue: "ccc",
    component: "Input",
    // style: "color:red",
    // slot: "",
    componentProps: {
      slot: "",
      readonly: true,
      onfocus: (e) => e.target.removeAttribute("readonly"),
      onblur: (e) => e.target.setAttribute("readonly", true),
      onClick:()=>{
        console.log('11111')
      },
      onkeyup:(e)=>{
        console.log(e.target.value)
      }
    },

    rules: [
      {
        required: true,
        message: "Please input name",
        trigger: "blur",
      },
      {
        min: 3,
        max: 5,
        message: "Length should be 3 to 5",
        trigger: "blur",
      },
    ],
  },
  {
    field: "date",
    label: "生日",
    component: "DatePicker",
    slot: "date",
    colProps: { span: 8 },
    rules: [
      {
        required: true,
        message: "Please input date",
        trigger: "change",
      },
    ],
  },

  {
    field: "online",
    label: "是否在线",
    defaultValue: false,
    colProps: { span: 8 },
    component: "Switch",
    rules: [
      {
        required: true,
        message: "Please input online",
        trigger: "change",
      },
    ],
  },
  // {
  //   label: "",
  //   render: createVNode(
  //     Divider,
  //     {},
  //     "姓名"
  //   ),
  //   componentProps: {
  //     orientation: "left",
  //   },
  // },
  {
    field: "city",
    label: "城市",
    defaultValue: 1,
    component: "Select",
    colProps: { span: 12 },
    componentProps: {
      // disabled: true,
      options: [],
    },
    rules: [
      {
        required: true,
        message: "Please select city",
        trigger: "change",
      },
    ],
  },
  {
    field: "sex",
    label: "性别",
    defaultValue: 1,
    colProps: { span: 12 },
    component: "RadioGroup",
    componentProps: {
      options: [
        {
          label: "男",
          value: 1,
        },
        {
          label: "女",
          value: 2,
        },
      ],
    },
    rules: [
      {
        type: "number",
        required: true,
        message: "Please select sex",
        trigger: "change",
      },
    ],
  },
  {
    field: "like",
    label: "爱好",
    defaultValue: [1, 2],
    component: "CheckboxGroup",
    componentProps: {
      options: [
        {
          label: "足球",
          value: 1,
        },
        {
          label: "篮球",
          value: 2,
        },
        {
          label: "游泳",
          value: 3,
        },
      ],
    },
    rules: [
      {
        type: "array",
        required: true,
        message: "Please select like",
        trigger: "change",
      },
    ],
  },
];

const [
  register,
  {
    setProps,
    setFiledsValue,
    getValue,
    updateSchema,
    resetFields,
    removeSchemaByField,
    updateSchemaByField,
    appendSchemaByField,
  },
] = useForm({
  schemas,
  // labelCol: { span: 4 },
  // wrapperCol: { span: 16 },
});
const newSchema = [
  {
    field: "city",
    label: "城市",
    defaultValue: 1,
    component: "Select",
    colProps: { span: 12 },
    componentProps: {
      // disabled: true,
      options: [
        {
          label: "北京",
          value: 1,
        },
        {
          label: "上海",
          value: 2,
        },
      ],
    },
    rules: [
      {
        required: true,
        message: "Please select city",
        trigger: "change",
      },
    ],
  },
  {
    field: "like",
    label: "爱好",
    defaultValue: [1, 2],
    component: "CheckboxGroup",
    componentProps: {
      options: [
        {
          label: "羽毛球",
          value: 1,
        },
        {
          label: "篮球",
          value: 2,
        },
        {
          label: "游泳",
          value: 3,
        },
      ],
    },
    rules: [
      {
        type: "array",
        required: true,
        message: "Please select like",
        trigger: "change",
      },
    ],
  },
];

const appendSchema = {
  field: "ffff",
  label: "城市",
  defaultValue: 1,
  component: "Select",
  colProps: { span: 12 },
  componentProps: {
    // disabled: true,
    options: [
      {
        label: "北京",
        value: 1,
      },
      {
        label: "上海",
        value: 2,
      },
    ],
  },
  rules: [
    {
      required: true,
      message: "Please select city",
      trigger: "change",
    },
  ],
};
function setVal() {
  const form = { name: "test", sex: 1, city: 2, like: [2, 3] };
  setFiledsValue(form);
}
async function submitForm() {
  const a = await getValue();
  console.log(a);
}
</script>
